<style lang="less" scoped>
.order-list {}

.search {
    width: 20%;
}

.list-group {
    margin-top: 0.5em;
    // width: 95%;
    line-height: 1.8em;
    .list-group-item {}
}
h5{
    line-height: 2em;
    padding-left: 0.8em;
}
.empty{
    padding: 1em;
}
</style>
<template>
    <div class="order-list">
        <Row>
            <Col span="24">
            <Input v-model="searchCode" icon="search" placeholder="订单检索..." class="search"></Input>
            </Col>
            <Col span="12">
                <h5>商城订单（{{list0.length}}）</h5>
                <div v-if="list0.length">
                    
                    <ul class="list-group">
                        <li class="list-group-item my-item box" v-for="(x,i) of filterData0" :key="i" @click="handleLink(x.order_code)">
                            <div class="box-cell-1">
                                <h4>{{x.order_code}}</h4>
                                <p>{{x.demand_deprt_name}}</p>
                                <p>创建时间：{{x.order_date}}</p>
                                <p v-if="x.audit_user">审核人：{{x.audit_user}}</p>
                            </div>
                            <div class="">
                                <Tag type="border" :color="x.color">{{x.status_descp}}</Tag>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="empty" v-else>
                    <Alert show-icon>
                        轻松一下
                        <template slot="desc">目前，没有待办的运维订单</template>
                    </Alert>
                </div>
            </Col>
            <Col span="12">
                <h5>物资平台订单（{{list1.length}}）</h5>
                <div v-if="list1.length">
                    <ul class="list-group">
                        <li class="list-group-item my-item box" v-for="(x,i) of filterData1" :key="i" @click="handleLink(x.order_code)">
                            <div class="box-cell-1">
                                <h4>{{x.order_code}}</h4>
                                <p>{{x.require_descp}}</p>
                                <p>创建时间：{{x.order_date}}</p>
                                <p v-if="x.audit_user">审核人：{{x.audit_user}}</p>
                            </div>
                            <div class="">
                                <Tag type="border" :color="x.color">{{x.status_descp}}</Tag>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="empty" v-else>
                    <Alert show-icon>
                        轻松一下
                        <template slot="desc">目前，没有待办的运维订单</template>
                    </Alert>
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>

export default {
    data() {
        return {
            searchCode: "",
            orderList: [],
            list0:[],
            list1:[],
            step: 0,
            stepMap: { '0': 'unfinish', '2': 'auditing', '3': 'passlist' }
        }
    },
    watch: {
        '$route': 'fetchData'
    },
    computed: {
        filterData0() {
            return filterArr(this.list0, this.searchCode)
        },
        filterData1() {
            return filterArr(this.list1, this.searchCode)
        },
    },
    created() {

        this.fetchData()
    },
    mounted() {

        //121505AX20190726173357262
    },
    methods: {
        fetchData() {
            this.step = this.$route.params["step"]
            this.$store.commit('current', parseInt(this.step))
            this.orderList = []
            this.$store.dispatch(this.stepMap[this.step]).then(resp => {
                this.orderList = resp.data.items
                console.log('orderlist length',this.orderList.length)
                this.color()
                this.list0=_.where(this.orderList,{from_sys:0})
                this.list1=_.where(this.orderList,{from_sys:1})
                // this.list1=this.orderList
            })
        },
        handleLink(order_code) {
            if (this.step == 0) {
                this.$store.commit("plusCurrent")
                this.$router.push({ name: "OrderDetailU", params: { order_code } })
            } else {
                this.$router.push({ name: "OrderDetail", params: { order_code, step: this.step } })
            }

        },
        color() {
            this.orderList.forEach(e => {
                let code = e.status_code
                switch (code) {
                    case "0":
                        e.color = "red"
                        break;
                    case "10":
                        e.color = "green"
                        break;
                    case "20":
                        e.color = "yellow"
                        break;
                    case "30":
                        e.color = "blue"
                        break;

                }
            }, this)

        }
    },
    components: {

    }
}
</script>
